    * {
        margin: 0;
        padding: 0;
    }
    
    html {
        font-size: 20px;
    }
    
    body {
        background-color: #f4f4f4;
    }
    
    @media screen and (min-width: 768px) {
        html {
            font-size: 40.96px;
        }
        .movieList {
            justify-content: space-between;
        }
    }
    
    @media screen and (min-width: 1024px) {
        html {
            font-size: 54.613px;
        }
        .movieList {
            justify-content: space-between;
        }
    }
    
    @media screen and (min-width: 320px) and (max-width:568px) {
        html {
            font-size: 17.0666666667px;
        }
        .gradeBodyRight-rgt {
            &>p {
                &:nth-of-type(1) {
                    color: #ffeec1;
                    font-size: .4rem;
                    zoom: .8;
                    opacity: .6;
                }
                &:nth-of-type(2) {
                    white-space: nowrap;
                    zoom: .8;
                    font-size: .6rem;
                    color: #fff4bd;
                }
            }
        }
        .movieList-rgt {
            margin-left: .55rem;
        }
    }
    
    @media screen and (min-width: 375px) and (max-width:767px) {
        html {
            font-size: 20px;
        }
    }
    
    @media screen and (min-width: 414px) and (max-width:736px) {
        html {
            font-size: 22.08px;
        }
    }
    
    @media screen and (min-width: 411px) and (max-width:412px) {
        html {
            font-size: 21.92px;
        }
    }
    
    .topfixed {
        width: 100%;
        height: 3rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        .maoyan {
            display: flex;
            align-items: center;
            img {
                width: 4.7rem;
                height: 1.95rem;
                margin-left: .85rem;
            }
        }
        .rgtmaoyan {
            display: flex;
            align-items: center;
            p {
                &:nth-of-type(1) {
                    font-size: .7rem;
                    color: #666;
                    font-weight: 620;
                    margin-left: 3rem;
                }
                &:nth-of-type(2) {
                    display: flex;
                    align-items: center;
                    font-size: .8rem;
                    color: #b37e7e;
                    font-weight: 700;
                    margin-left: .7rem;
                    img {
                        width: .6rem;
                        height: .6rem;
                    }
                }
            }
        }
    }
    
    #app {
        overflow: hidden;
        .goubtm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 3rem;
            background-color: #fff;
            border-radius: .25rem;
            img {
                width: .95rem;
                height: .95rem;
                margin-left: 1rem;
            }
            .goured {
                width: 14.1rem;
                border-radius: 1rem;
                height: 2.2rem;
                background-image: linear-gradient(-90deg, #fb3333, #ff5269);
                color: #fff;
                font-size: .85rem;
                text-align: center;
                line-height: 2.2rem;
                margin-right: .25rem;
            }
        }
        .movie {
            padding: 1.05rem .8rem;
            height: auto;
            background-color: #662929;
            .appnone {
                display: none;
                #appfixed {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 1rem 0 0 1rem;
                    z-index: 99;
                    position: fixed;
                    bottom: 5.95rem;
                    right: 0rem;
                    width: 5.5rem;
                    height: 1.9rem;
                    background-image: linear-gradient( 134deg, #fb3333, #ff5269 75%);
                    img {
                        width: 1.15rem;
                        height: 1.15rem;
                    }
                    p {
                        margin-left: .3rem;
                        font-size: .7rem;
                        color: #fff;
                    }
                }
            }
            .applist {
                z-index: 999;
                position: fixed;
                top: -2.25rem;
                left: 0;
                width: 100%;
                height: 2.25rem;
                background-color: rgba(0, 0, 0, .85);
                display: flex;
                align-items: center;
                justify-content: space-between;
                .applist-lft {
                    margin-left: .75rem;
                    font-size: .65rem;
                    color: #fff;
                }
                .applist-rgt {
                    margin-right: .75rem;
                    width: 3.55rem;
                    height: 1.4rem;
                    border-radius: .75rem;
                    background-color: #f03d37;
                    text-align: center;
                    font-size: .65rem;
                    color: #fff;
                    line-height: 1.4rem;
                }
            }
            .movieNav {
                margin-bottom: .75rem;
                font-size: .7rem;
                color: #ccc;
            }
            .movieList {
                display: flex;
                .movieList-lft {
                    position: relative;
                    width: 5rem;
                    height: 6.9rem;
                    img {
                        &:nth-of-type(1) {
                            width: 100%;
                            height: 100%;
                        }
                        &:nth-of-type(2) {
                            position: absolute;
                            width: 1.5rem;
                            height: 1.5rem;
                            left: 0;
                            bottom: 0;
                        }
                    }
                }
                .movieList-rgt {
                    h1 {
                        font-size: 1rem;
                        color: #fff;
                        margin-bottom: .5rem;
                    }
                    &>p {
                        font-size: .6rem;
                        color: #fff;
                        opacity: .6;
                        &:nth-of-type(2) {
                            margin-bottom: .25rem;
                        }
                    }
                    .pDemo {
                        margin: .2rem 0;
                        display: flex;
                        align-items: center;
                        &>p {
                            font-size: .6rem;
                            color: #fff;
                            opacity: .6;
                        }
                        img {
                            opacity: 1;
                            width: 2rem;
                            height: .7rem;
                        }
                    }
                    .rgtBtm {
                        margin-top: .15rem;
                        display: flex;
                        justify-content: space-between;
                        .rgtBtmLeft {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: .7rem;
                            color: #fff;
                            width: 5.5rem;
                            height: 1.5rem;
                            border-radius: .25rem;
                            background: hsla(0, 0%, 100%, .35);
                            &>img {
                                width: .7rem;
                                height: .7rem;
                                margin-right: .15rem;
                            }
                        }
                        .rgtBtmRight {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: .7rem;
                            color: #fff;
                            width: 5.5rem;
                            height: 1.5rem;
                            border-radius: .25rem;
                            background: hsla(0, 0%, 100%, .35);
                            &>img {
                                width: .7rem;
                                display: block;
                                height: .7rem;
                                margin-right: .2rem;
                            }
                        }
                    }
                }
            }
            .grade {
                margin-top: .75rem;
                padding: .5rem;
                background-color: rgba(0, 0, 0, .18);
                border-radius: .5rem;
                .gradeTop {
                    display: flex;
                    align-items: center;
                    &>img {
                        display: flex;
                        width: .7795rem;
                        height: .7795rem;
                        margin-right: .15rem;
                    }
                    &>p {
                        display: flex;
                        align-items: center;
                        span {
                            &:nth-of-type(1) {
                                font-size: .6rem;
                                color: #fff;
                            }
                            &:nth-of-type(2) {
                                font-size: .6rem;
                                color: #fff;
                                opacity: .6;
                                margin-left: .15rem;
                            }
                            &:nth-of-type(3) {
                                font-size: .6rem;
                                color: #fff;
                                opacity: .6;
                                margin-left: .9rem;
                            }
                        }
                        &>img {
                            width: .25rem;
                            height: .45rem;
                            margin-left: .1rem;
                        }
                    }
                }
                .gradeBody {
                    padding-top: .75rem;
                    display: flex;
                    justify-content: space-between;
                    .gradeBodyLeft {
                        display: flex;
                        align-items: center;
                        .grade-progress {
                            &>p {
                                &:nth-of-type(1) {
                                    font-size: 1.3rem;
                                    color: #ffb400;
                                    font-weight: bold;
                                    text-align: right;
                                }
                                &:nth-of-type(2) {
                                    opacity: .6;
                                    font-size: .4rem;
                                    zoom: .8;
                                    color: hsla(0, 0%, 100%, .4);
                                }
                            }
                        }
                        .gradelist {
                            margin-left: .15rem;
                            .listImg {
                                display: flex;
                                margin-bottom: .15rem;
                                &>img {
                                    width: .25rem;
                                    height: .25rem;
                                    margin-left: .1rem;
                                    opacity: .4;
                                }
                                .progress {
                                    margin-left: .1rem;
                                    width: 3.55rem;
                                    height: .2rem;
                                    background-color: hsla(0, 0%, 100%, .06);
                                    .progressDemo {
                                        height: .2rem;
                                    }
                                }
                            }
                        }
                    }
                    .gradeBodyRight {
                        border: .05rem solid #b49c70;
                        box-sizing: border-box;
                        width: 6rem;
                        height: 2.2rem;
                        border-radius: .35rem;
                        padding: .1rem;
                        margin-right: .45rem;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .gradeBodyRight-lft {
                            margin-top: .2rem;
                            position: relative;
                            &>img {
                                width: 1.45rem;
                                height: 1.8rem;
                            }
                            p {
                                &:nth-of-type(1) {
                                    position: absolute;
                                    top: .35rem;
                                    left: .3rem;
                                    color: rgba(255, 229, 150, 0.7);
                                    font-size: .4rem;
                                    zoom: .8;
                                }
                                &:nth-of-type(2) {
                                    position: absolute;
                                    top: .8rem;
                                    left: .5rem;
                                    color: #ffe186;
                                    font-size: .7rem;
                                }
                            }
                        }
                        .gradeBodyRight-rgt {
                            &>p {
                                &:nth-of-type(1) {
                                    color: #ffeec1;
                                    font-size: .4rem;
                                    zoom: .8;
                                    opacity: .6;
                                }
                                &:nth-of-type(2) {
                                    font-size: .6rem;
                                    color: #fff4bd;
                                }
                            }
                        }
                    }
                }
                .gradeBtm {
                    border-radius: .25rem;
                    margin-top: .5rem;
                    padding: .4rem;
                    display: flex;
                    align-items: center;
                    background-color: rgba(0, 0, 0, .12);
                    img {
                        width: .75rem;
                        height: .75rem;
                    }
                    p {
                        margin-left: .25rem;
                        font-size: .6rem;
                        color: #fffadf;
                    }
                }
            }
            .remark {
                margin-top: .8rem;
                .remarkTop {
                    display: flex;
                    justify-content: space-between;
                    .remarkTopLeft {
                        font-size: .75rem;
                        color: #fff;
                    }
                    .remarkTopRgt {
                        display: flex;
                        align-items: center;
                        p {
                            margin-right: .2rem;
                            font-size: .6rem;
                            color: #ccc;
                        }
                        img {
                            transform: rotate(90deg);
                            width: .25rem;
                            height: .45rem;
                        }
                    }
                }
                .details {
                    margin: .35rem 0;
                    font-size: .75rem;
                    color: #fff;
                    line-height: 1.25rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .detailsOut {
                    margin: .35rem 0;
                    font-size: .75rem;
                    color: #fff;
                    line-height: 1.25rem;
                }
            }
            .actor {
                margin: .9rem 0 .75rem;
                .actorTitle {
                    display: flex;
                    justify-content: space-between;
                    .actorlft {
                        font-size: .75rem;
                        color: #fff;
                    }
                    .remarkTopRgt {
                        display: flex;
                        align-items: center;
                        p {
                            margin-right: .2rem;
                            font-size: .6rem;
                            color: #ccc;
                        }
                        img {
                            transform: rotate(90deg);
                            width: .25rem;
                            height: .45rem;
                        }
                    }
                }
                .overflow-hidden {
                    height: 7.25rem;
                    overflow: hidden;
                    margin-top: .75rem;
                    .actorUl {
                        list-style: none;
                        display: flex;
                        overflow-x: scroll;
                        li {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-left: .5rem;
                            margin-bottom: .4rem;
                            img {
                                width: 4rem;
                            }
                            p {
                                &:nth-of-type(1) {
                                    font-size: .6rem;
                                    color: #fff;
                                }
                                &:nth-of-type(2) {
                                    font-size: .6rem;
                                    color: #fff;
                                    opacity: .4;
                                }
                            }
                        }
                    }
                }
            }
            .actor {
                margin: .9rem 0 .75rem;
                .actorTitle {
                    display: flex;
                    justify-content: space-between;
                    .actorlft {
                        font-size: .75rem;
                        color: #fff;
                    }
                    .remarkTopRgt {
                        display: flex;
                        align-items: center;
                        p {
                            margin-right: .2rem;
                            font-size: .6rem;
                            color: #ccc;
                        }
                        img {
                            transform: rotate(90deg);
                            width: .25rem;
                            height: .45rem;
                        }
                    }
                }
                .overflow-hidden {
                    height: 7.25rem;
                    overflow: hidden;
                    margin-top: .75rem;
                    .actorUl {
                        list-style: none;
                        display: flex;
                        overflow-x: scroll;
                        li {
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-left: .5rem;
                            margin-bottom: .4rem;
                            img {
                                width: 4rem;
                            }
                            p {
                                &:nth-of-type(1) {
                                    font-size: .6rem;
                                    color: #fff;
                                }
                                &:nth-of-type(2) {
                                    font-size: .6rem;
                                    color: #fff;
                                    opacity: .4;
                                }
                            }
                            .play {
                                position: absolute;
                                width: 1.6rem;
                                height: 1.6rem;
                                border-radius: 50%;
                                background-color: hsla(0, 0%, 100%, .9);
                                .playdemo {
                                    position: absolute;
                                    width: 0;
                                    height: 0;
                                    left: .6rem;
                                    top: .5rem;
                                    border-top: .3rem solid transparent;
                                    border-bottom: .3rem solid transparent;
                                    border-right: .25rem solid transparent;
                                    border-left: .5rem solid #000000;
                                }
                            }
                        }
                    }
                }
            }
        }
        .comments {
            background-color: #fff;
            border-top-left-radius: .5rem;
            border-top-right-radius: .5rem;
            margin-top: -1.65rem;
            .comments-title {
                padding: .65rem .8rem .7rem;
                font-size: .75rem;
                color: #333;
            }
            .comments-body {
                display: flex;
                padding: .75rem 0.75rem .75rem .75rem;
                .comments-lft-img {
                    width: 1.7rem;
                    height: 1.7rem;
                    img {
                        width: 1.7rem;
                        height: 1.7rem;
                        border-radius: 50%;
                    }
                }
                .comments-rgt-list {
                    margin-left: .5rem;
                    .commet-list {
                        display: flex;
                        justify-content: space-between;
                        .commetLft {
                            .commetlft-top {
                                display: flex;
                                &>p {
                                    font-size: .6rem;
                                    color: #333;
                                }
                                &>img {
                                    margin-left: .15rem;
                                    width: 1.8rem;
                                    height: .8rem;
                                }
                            }
                            .commetlft-btm {
                                display: flex;
                                align-content: center;
                                .btmImg {
                                    display: flex;
                                    align-items: center;
                                    &>img {
                                        width: .45rem;
                                        height: .45rem;
                                    }
                                }
                                &>span {
                                    &:nth-of-type(1) {
                                        font-size: .6rem;
                                        color: #faaf00;
                                        transform: scale(.75);
                                    }
                                    &:nth-of-type(2) {
                                        display: block;
                                        border: .05rem solid #4f89b3;
                                        color: #4f89b3;
                                        padding: 0 .25rem;
                                        border-radius: .5rem;
                                        font-size: .6rem;
                                        transform: scale(.75);
                                    }
                                }
                            }
                        }
                        .commetRgt {
                            position: relative;
                            display: flex;
                            align-items: center;
                            margin-right: .45rem;
                            &::after {
                                content: "";
                                position: absolute;
                                left: -0.35rem;
                                width: 3.8rem;
                                height: 1.2rem;
                                border: .05rem solid #ccc;
                                border-radius: .75rem;
                            }
                            &>img {
                                width: .8rem;
                                height: .8rem;
                            }
                            &>p {
                                margin-left: .25rem;
                                display: block;
                                font-size: .6rem;
                                color: #999;
                            }
                        }
                    }
                    .commet-cent {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 7;
                        margin-top: .25rem;
                        .centList {
                            font-size: .75rem;
                            color: #333;
                            line-height: 1rem;
                        }
                    }
                    .commet-btm {
                        align-items: center;
                        display: flex;
                        margin-top: .3rem;
                        &>p {
                            &:nth-of-type(1) {
                                font-size: .6rem;
                                color: #666;
                            }
                            &:nth-of-type(2) {
                                display: block;
                                background-color: #eef1f6;
                                font-size: .6rem;
                                color: #5a7cab;
                                margin-left: .25rem;
                                padding: .15rem .25rem;
                                border-radius: .5rem;
                            }
                        }
                    }
                }
            }
            .wire {
                position: absolute;
                width: 100%;
                height: .05rem;
                background-color: #e8e8e8;
                transform: scaleY(.5);
            }
            .redwire {
                height: 2.25rem;
                display: flex;
                align-items: center;
                justify-content: center;
                p {
                    font-size: .75rem;
                    color: #f03d37;
                }
                img {
                    margin-left: .2rem;
                    width: .3rem;
                    height: .55rem;
                }
            }
        }
        .ticket {
            margin-top: 2.35rem;
            .ticket-cet {
                padding: .6rem .75rem;
                .ticketlist {
                    p {
                        &:nth-of-type(1) {
                            font-size: .85rem;
                            color: #333;
                            font-weight: 700;
                            margin-bottom: .35rem;
                        }
                        &:nth-of-type(2) {
                            font-size: .6rem;
                            color: #666;
                        }
                    }
                }
            }
        }
        .criticize {
            margin-top: 2.35rem;
        }
        .actor {
            .wire {
                position: absolute;
                width: 100%;
                height: .05rem;
                background-color: #e8e8e8;
                transform: scaleY(.5);
            }
            .actorcet {
                padding: .5rem .7rem .75rem;
                display: flex;
                align-items: center;
                .actorimg {
                    width: 3.5rem;
                    height: 3.5rem;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .actorlist {
                    margin-left: .5rem;
                    &>p {
                        &:nth-of-type(1) {
                            font-size: .75rem;
                            color: #333
                        }
                        &:nth-of-type(2) {
                            font-size: .65rem;
                            color: #999;
                        }
                    }
                }
                .listshree {
                    flex: 1;
                    background-color: #f8f8f8;
                    padding: .6rem 0 .55rem;
                    border-radius: .25rem;
                    &>p {
                        &:nth-of-type(1) {
                            text-align: center;
                            font-size: .85rem;
                            color: #f03d37;
                        }
                        &:nth-of-type(2) {
                            text-align: center;
                            font-size: .6rem;
                            color: #666;
                        }
                    }
                }
                .top {
                    display: flex;
                    &>p {
                        font-size: .85rem;
                        color: #333;
                    }
                    img {
                        width: 5.5re, ;
                        height: 3.9rem;
                    }
                }
                .btm {
                    display: flex;
                    justify-content: space-between;
                    &>div {
                        font-size: .6rem;
                        color: #999;
                    }
                    .btmlist {
                        display: flex;
                        &>div {
                            display: flex;
                            align-items: center;
                            &>img {
                                width: .7rem;
                                height: .6rem;
                                margin-right: .25rem;
                            }
                        }
                        &>p {
                            font-size: .6rem;
                            color: #999;
                        }
                    }
                }
            }
            .actorTitle {
                display: flex;
                justify-content: space-between;
                .actorlft {
                    font-size: .75rem;
                    color: #333;
                }
                .remarkTopRgt {
                    margin-right: .2rem;
                    display: flex;
                    align-items: center;
                    p {
                        margin-right: .2rem;
                        font-size: .65rem;
                        color: #666;
                    }
                    img {
                        width: .25rem;
                        height: .45rem;
                    }
                }
            }
            .overflow-hidden {
                height: 7.25rem;
                overflow: hidden;
                margin-top: .75rem;
                .actorUl {
                    list-style: none;
                    display: flex;
                    overflow-x: scroll;
                    li {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin-left: .5rem;
                        margin-bottom: .4rem;
                        img {
                            width: 4rem;
                        }
                        p {
                            &:nth-of-type(1) {
                                font-size: .6rem;
                                color: #fff;
                            }
                            &:nth-of-type(2) {
                                font-size: .6rem;
                                color: #fff;
                                opacity: .4;
                            }
                        }
                    }
                }
            }
            .overflow-hiddens {
                height: 7.95rem;
                overflow: hidden;
                .over-ul {
                    list-style: none;
                    display: flex;
                    overflow-x: scroll;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                    li {
                        position: relative;
                        margin-left: .25rem;
                        margin-bottom: .3rem;
                        img {
                            display: block;
                            border-radius: .25rem;
                            width: 4.8rem;
                            height: 6.7rem;
                        }
                        p {
                            width: 4.8rem;
                            margin-top: .25rem;
                            font-size: .75rem;
                            color: #333;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .inmake {
                            position: absolute;
                            left: 0;
                            bottom: 1.2rem;
                            background-image: linear-gradient(-180deg, rgba(29, 29, 29, 0) 68%, #1d1d1d);
                            width: 100%;
                            height: 100%;
                        }
                        .spandemo {
                            position: absolute;
                            bottom: 1.45rem;
                            left: .3rem;
                            color: #faaf00;
                            font-size: .6rem;
                        }
                    }
                }
            }
        }
        .disclaimer {
            margin-top: 1.95rem;
            padding-bottom: 3rem;
            text-align: center;
            p {
                color: #999;
                font-size: .6rem;
                span {
                    &:nth-of-type(1) {
                        font-size: .6rem;
                        color: #4e759e;
                    }
                }
            }
            .discbtm {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 2.45rem;
                img {
                    height: 1.1rem;
                }
            }
        }
    }